<template lang="pug">
  .content
    el-card.pr.detail.commonCard(shadow="never")
      el-row
        el-col(:span="16")
          h1 {{vendorCourse.title}}
        el-col(:span="8")
          el-button.mb10.btn-primary-box(size="large" @click="detailHandle('1', '全书同详情')") 全书同详情
          el-button.mb10.btn-primary-box(size="large" @click="detailHandle('2', '全月同详情')") 全月同详情
          el-button.mb10.btn-primary-box(v-if="courseType !== 2" @click="detailHandle('3', '全周同详情')") 全周同详情
      p
        span(v-for="(item, index) in details") {{item.label}}：{{item.value}}
    el-card.commonCard(shadow="never" v-for="(item, index) in courseContent" :key="index")
      h2(slot="header") {{item.title}}
      markdown-editor(:viewer="true" :value="item.content")
      el-steps(v-if="item.contentList" :active="item.active")
        el-step(v-for="(step, stepIndex) in item.contentList"  :title="step.title" @click.native="stepClick(index, stepIndex)" :key="stepIndex")
      div(v-if="item.contentList.length > 0")
        markdown-editor(v-if="item.contentList[item.active].content" :viewer="true" :value="item.contentList[item.active].content")
        el-row(:gutter="20")
          el-col(v-for="(tool, index) in item.contentList[item.active].toolList" :span="8" :key="tool.id")
            .course(@click="()=> toolHandle(tool)")
              audio-player(
                v-if="tool.type === 'radio'"
                ref="audioPlayer"
                :show-prev-button="false"
                :show-next-button="false"
                :audio-list="[tool.imgUrl]"
                :isLoop="false"
              )
              a-image(v-else :url="wrapToolCover(tool)" height="230px" :preview="false")
              h3 {{tool.title}}
      div
        el-row(:gutter="20")
          el-col(v-for="(tool, index) in item.toolList" :span="8" :key="tool.id")
            .course(@click="()=> toolHandle(tool)")
              audio-player(
                v-if="tool.type === 'radio'"
                ref="audioPlayer"
                :show-prev-button="false"
                :show-next-button="false"
                :audio-list="[tool.imgUrl]"
                :isLoop="false"
              )
              a-image(v-else :url="wrapToolCover(tool)" height="230px" :preview="false")
              h3 {{tool.title}}
    week-drawer(:visible.sync="infoVisible" :categoryType="categoryType" :categoryName="categoryName" :courseId="courseId" :courseName="courseName")
</template>

<script>
import AImage from '@/components/Basic/Image'
import { getCourseInfoV2 } from './api'
import MarkdownEditor from '@/components/Basic/MarkdownEditor'
import WeekDrawer from './components/weekDrawer'
import AudioPlayer from '@liripeng/vue-audio-player'
export default {
  components: {
    MarkdownEditor,
    AImage,
    WeekDrawer,
    AudioPlayer
  },
  data () {
    return {
      activeNames: '',
      vendorCourse: {},
      courseContent: [],
      infoVisible: false,

      categoryType: '',
      categoryName: '',

      currentAudioName: '',
      audioList: [
        {
          name: '音频1',
          url: 'https://saas.res.dotflat.cn/teach/file/course/common/admin_1651135942819.mp3'
        }
      ]
    }
  },
  computed: {
    courseId () {
      return this.$route.query.courseId
    },
    courseName () {
      return this.$route.query.courseName
    },
    courseType () {
      return this.$route.query.courseType
    },
    details () {
      return JSON.parse(this.vendorCourse.details)
    }
  },
  created () {
    this.getCourse()
  },
  mounted () {
    console.log('courseDetail mounted')
    this.$nextTick(() => {
      // 禁用右键
      document.oncontextmenu = new Function('event.returnValue=false')
      // 禁用选择
      document.onselectstart = new Function('event.returnValue=false')
    })
  },
  beforeDestroy () {
    this.$nextTick(() => {
      // 禁用右键
      document.oncontextmenu = new Function('event.returnValue=true')
      // 禁用选择
      document.onselectstart = new Function('event.returnValue=true')
    })
  },
  methods: {
    stepClick (index, stepIndex) {
      this.courseContent[index].active = stepIndex
    },
    toolHandle (tool) {
      console.log(tool)
      if (tool.type !== 'audio') {
        window.open(tool.imgUrl)
      }
    },
    getCourse () {
      getCourseInfoV2({ courseId: this.courseId }).then(res => {
        console.log(res)
        this.vendorCourse = res.vendorCourse

        this.courseContent = res.courseContent.map(x => {
          x.active = 0
          return x
        })
      })
    },

    detailHandle (categoryType, categoryName) {
      this.categoryType = categoryType
      this.categoryName = categoryName
      this.infoVisible = true
    },

    wrapToolCover (item) {
      if (item.type === 'image') {
        return item.imgUrl
      }
      return item.cover
    }
  }
}
</script>

<style scoped lang="scss">
.content{

}
span {
  margin-right: 24px;
}
.course{
  margin-bottom: 20px;
  h3 {
    margin-top: 20px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }
}
</style>
